<template>
  <div>
    <!-- API编辑弹窗 -->
    <el-dialog
      title="API编辑"
      :visible.sync="dialogVisibleCode"
      width="50%"
      :before-close="handleClose"
    >
      <el-form-item label="接口地址" prop="url">
        <el-input v-model="formVal.url" placeholder="请输入接口地址"/>
      </el-form-item>
      <el-form-item label="接口方式" prop="dataMethod">
        <el-select
          v-model="formVal.dataMethod"
          placeholder="请选择接口方式"
          style="width:100%"
        >
          <el-option
            v-for="(item) in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请求参数" prop="dataParams">
        <vue2AceEditor
          v-model="formVal.dataParams"
          @init="editorInit"
          @input="codeChange"
          lang="javascript"
          :options="editorOptions"
          theme="chrome"
          style="height:360px"
        ></vue2AceEditor>
      </el-form-item>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dynamicComponent.dialogVisibleCode = false">取 消</el-button>
        <el-button type="primary" @click="saveData">确 定</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
import vue2AceEditor from "vue2-ace-editor";
export default {
  name: 'codeDialog',
  inject: ["dynamicComponent", "designerComponent"],
  components: {
    vue2AceEditor
  },
  props: {
    dialogVisibleCode: Boolean
  },
  data() {
    return {
      // 请求参数
      formVal: {
        url: '',
        dataMethod: '',
        dataParams: {},
        // dataResponse: {}
      },
      options: [
        {
          value: 'post',
          label: 'post'
        },
        {
          value: 'get',
          label: 'get'
        }
      ],
      paramsDialog: false,
      editorOptions: {
        // 设置代码编辑器的样式
        enableBasicAutocompletion: true, //启用基本自动完成
        enableSnippets: true, // 启用代码段
        enableLiveAutocompletion: true, //启用实时自动完成
        tabSize: 2, //标签大小
        fontSize: 14, //设置字号
        showPrintMargin: false, //去除编辑器里的竖线
      },
    }
  },
  methods: {
    codeChange(val) {
      // console.log(val)
    },
    editorInit() {
      require("brace/theme/chrome");
      require("brace/ext/language_tools"); //language extension prerequsite...
      require("brace/mode/yaml");
      require("brace/mode/json");
      require("brace/mode/less");
      require("brace/snippets/json");
      require("brace/mode/lua");
      require("brace/snippets/lua");
      require("brace/mode/javascript");
      require("brace/snippets/javascript");
    },
    initformVal(){
      // 请求参数默认值
      const data = this.designerComponent.widgetOptions.data
      for (let i = 0; i < data.length; i++) {
        if(data[i].name === 'dynamicData') {
          this.formVal = data[i].value
        }
      }
    },
    // API编辑取消
    handleClose() {
      this.dynamicComponent.dialogVisibleCode = false
    },
    // 参数编辑取消
    handleCloseParams() {
      this.paramsDialog = false
    },
    // 检测json格式
    isJSON(str) {
      if (typeof str == 'string') {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == 'object' && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          return false;
        }
      } else if (typeof str == 'object' && str) {
        return true;
      }
    },
    // 同步数据
    saveData() {
      if (!this.isJSON(this.formVal.dataParams)) {
        this.$message.error(`json格式错误`);
        return false;
      }

      // 深拷贝一份解决双向数据绑定问题
      const formVal = this.deepClone(this.formVal);
      formVal.dataParams = JSON.parse(formVal.dataParams)
      // 把接口的请求参数添加到当前组件value中
      const currWidget = this.designerComponent.widgets.filter(item => item.id === this.designerComponent.widgetIndex[0])[0]
      currWidget.value.data.dynamicData = formVal
      // 把接口的请求参数添加到当前组件option中
      const data = currWidget.options.data
      for (let i = 0; i < data.length; i++) {
        if(data[i].name === 'dynamicData') {
          data[i].value = formVal
        }
      }
      // 取消弹窗
      this.dynamicComponent.dialogVisibleCode = false
    },
  }
}
</script>
<style scoped lang="less">
  .my-editor {
    height: 400px;

    div.jsoneditor {
      height: 400px !important;
    }
  }
</style>